<template>
    <div class="bar" id="bar" :style="{height:400+'px',width:100+'%'}">

    </div>
</template>

<script setup  lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue'
 // 接收一个父组件给的数据
let props:any =   defineProps({
    echartsList:{
        type:Object
    }
 })
onMounted(() => {
    let dom  =document.getElementById('bar')
    var myChart:any 
     if(dom){
         myChart  = echarts.init(dom);
     }
    
    console.log(props.echartsList.xdata,'父组件给子组件的，异步数据');
    
   //echart 属性
    let option = {
        xAxis: {
            type: 'category',
            data: props.echartsList.xdata
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };

    myChart.setOption(option)
})

</script>

<style>

</style>